<template>
  <div class="index">
    <div v-if="!showCharts">
      <el-row>
        <el-col :span="24">
          <div class="card">
            <div class="card-item">
              <i class="el-icon-wallet"></i>
              <div class="item-detail">
                <p style="color: gray;">余额</p>
                <p style="font-weight: bold;">{{amount}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-box"></i>
              <div class="item-detail">
                <p style="color: gray;">总额</p>
                <p style="font-weight: bold;">{{totalAmount}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-price-tag"></i>
              <div class="item-detail">
                <p style="color: gray;">分销总额</p>
                <p style="font-weight: bold;">{{totalDistributeFee}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-discount"></i>
              <div class="item-detail">
                <p style="color: gray;">咨询总额</p>
                <p style="font-weight: bold;">{{totalReplyFee}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-lock"></i>
              <div class="item-detail">
                <p style="color: gray;">已结算</p>
                <p style="font-weight: bold;">{{hasSettlement}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-female"></i>
              <div class="item-detail">
                <p style="color: gray;">是否发起了提现申请</p>
                <p style="font-weight: bold;">{{isApplyDrawCash?"是":"否"}}</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="showCharts" class="indexCharts">
      <el-row>
        <el-col :span="24">
          <div class="card">
            <div class="card-item">
              <i class="el-icon-user-solid"></i>
              <div class="item-detail">
                <p style="color: gray;">昨日新增/浏览用户</p>
                <p style="font-weight: bold;">{{preDayRegistCustomer}}/{{preDayNewCreatedCustomer}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-chat-dot-round"></i>
              <div class="item-detail">
                <p style="color: gray;">咨询订单消息</p>
                <p style="font-weight: bold;">{{countUnReply}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-s-claim"></i>
              <div class="item-detail">
                <p style="color: gray;">待处理售后</p>
                <p style="font-weight: bold;">{{countApply}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-shopping-cart-2"></i>
              <div class="item-detail">
                <p style="color: gray;">待发货订单</p>
                <p style="font-weight: bold;">{{countUnSendOrder}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-s-finance"></i>
              <div class="item-detail">
                <p style="color: gray;">订单昨日交易额</p>
                <p style="font-weight: bold;">{{preDayOrderAmount}}</p>
              </div>
            </div>
            <div class="card-item">
              <i class="el-icon-s-finance"></i>
              <div class="item-detail">
                <p style="color: gray;">咨询昨日交易额</p>
                <p style="font-weight: bold;">{{preDayDoctorOrderAmount}}</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top:20px">
        <el-form :model="orderQueryParam" ref="orderQueryParam" inline>
          <el-form-item label="订单来源:" label-width="100px" prop="sourceType">
            <el-select v-model="orderQueryParam.sourceType" placeholder="请选择订单来源" clearable>
              <el-option
                v-for="item in fromList"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品:" label-width="100px" prop="productId">
            <el-select v-model="orderQueryParam.productId" placeholder="请选择订单来源" clearable>
              <el-option
                v-for="item in productList"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围:" label-width="100px" prop="timespan">
            <el-date-picker
              v-model="orderQueryParam.timespan"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="initOrderChart()">搜索</el-button>
            <el-button @click="resetForm('orderQueryParam')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="card">
            <div class="card-item">
              <div id="chart0" style="width: 100%;height: 200px;"></div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top:20px">
        <el-form :model="doctorOrderQueryParam" ref="doctorOrderQueryParam" inline>
          <el-form-item label="医生:" label-width="100px" prop="doctorId">
            <el-select v-model="doctorOrderQueryParam.doctorId" placeholder="请选择医生" clearable>
              <el-option
                v-for="item in doctorList"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="科目:" label-width="100px" prop="subjectId">
            <el-select v-model="doctorOrderQueryParam.subjectId" placeholder="请选择科目" clearable>
              <el-option
                v-for="item in subjectList"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围:" label-width="100px" prop="timespan">
            <el-date-picker
              v-model="doctorOrderQueryParam.timespan"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="initDoctorOrderChart()">搜索</el-button>
            <el-button @click="resetForm('doctorOrderQueryParam')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="card">
            <div class="card-item">
              <div id="doctorOrder" style="width: 100%;height: 200px;"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      amount: null,
      totalAmount: null,
      totalDistributeFee: null,
      totalReplyFee: null,
      hasSettlement: null,
      isApplyDrawCash: false,
      showCharts: false,
      preDayRegistCustomer: 0,
      preDayNewCreatedCustomer: 0,
      countUnReply: 0,
      countApply: 0,
      countUnSendOrder: 0,
      preDayOrderAmount: 0,
      preDayDoctorOrderAmount: 0,
      // preDayNewCustomer:0,
      // preDayNewCustomer:0,
      orderQueryParam: {
        sourceType: null,
        productId: null,
        timespan: [],
      },
      fromList: [
        { key: 1, label: "医生宣传" },
        { key: 2, label: "代理宣传" },
        { key: 3, label: "客户" },
        { key: 4, label: "门店" },
        { key: 5, label: "筛查活动" },
        { key: 6, label: "其他" },
      ],
      productList: [],
      doctorOrderQueryParam: {
        doctorId: null,
        subjectId: null,
        timespan: [],
      },
      doctorList: [],
      subjectList: [],
      orderCount: {
        title: {
          text: "订单趋势图",
          subtext: "成交订单",
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        legend: {
          data: ["订单量"],
          left: "left",
        },
        toolbox: {
          show: true,
          orient: "horizontal",
          left: "right",
          top: "top",
          color: ["#1e90ff", "#22bb22", "#4b0082", "#d2691e"],
          backgroundColor: "rgba(0,0,0,0)", // 工具箱背景颜色
          borderColor: "#ccc", // 工具箱边框颜色
          borderWidth: 0, // 工具箱边框线宽
          padding: 5, // 工具箱内边距
          showTitle: true,
          feature: {
            mark: {
              show: true,
              title: {
                mark: "辅助线-开关",
                markUndo: "辅助线-删除",
                markClear: "辅助线-清空",
              },
              lineStyle: { width: 1, color: "#1e90ff", type: "dashed" },
            },
            dataZoom: {
              show: true,
              title: "数据视图",
              readOnly: true,
              lang: ["数据视图", "美团", "刷新"],
              optionToContent: function (opt) {
                console.log(opt);
                var axisData = opt.xAxis[0].data;
                var series = opt.series;
                var table =
                  '<table style="width:100%;text-align:center"><tbody><tr>' +
                  "<td>时间</td>" +
                  "<td>" +
                  series[0].name +
                  "</td>" +
                  "<td>" +
                  series[1].name +
                  "</td>" +
                  "</tr>";
                for (var i = 0, l = axisData.length; i < l; i++) {
                  table +=
                    "<tr>" +
                    "<td>" +
                    axisData[i] +
                    "</td>" +
                    "<td>" +
                    series[0].data[i] +
                    "</td>" +
                    "<td>" +
                    series[1].data[i] +
                    "</td>" +
                    "</tr>";
                }
                table += "</tbody></table>";
                return table;
              },
            },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              title: {
                line: "动态类型切换-折线图",
                bar: "动态类型切换-柱形图",
                stack: "动态类型切换-堆积",
                tiled: "动态类型切换-平铺",
              },
              type: ["line", "bar", "stack", "tiled"],
            },
            restore: { show: true, title: "还原", color: "black" },
            saveAsImage: {
              show: true,
              title: "保存为图片",
              type: "jpeg",
              lang: ["点击本地保存"],
            },
          },
        },
        calculable: true,
        dataZoom: {
          show: true,
          realtime: true,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false, // 类目起始和结束两端空白策略,默认true留空,false则顶头
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数量",
            type: "line",
            data: [],
          },
        ],
      },
      doctoroOrderCount: {
        title: {
          text: "咨询订单趋势图",
          subtext: "成交订单",
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        legend: {
          data: ["订单量"],
          left: "left",
        },
        toolbox: {
          show: true,
          orient: "horizontal",
          left: "right",
          top: "top",
          color: ["#1e90ff", "#22bb22", "#4b0082", "#d2691e"],
          backgroundColor: "rgba(0,0,0,0)", // 工具箱背景颜色
          borderColor: "#ccc", // 工具箱边框颜色
          borderWidth: 0, // 工具箱边框线宽
          padding: 5, // 工具箱内边距
          showTitle: true,
          feature: {
            mark: {
              show: true,
              title: {
                mark: "辅助线-开关",
                markUndo: "辅助线-删除",
                markClear: "辅助线-清空",
              },
              lineStyle: { width: 1, color: "#1e90ff", type: "dashed" },
            },
            dataZoom: {
              show: true,
              title: "数据视图",
              readOnly: true,
              lang: ["数据视图", "美团", "刷新"],
              optionToContent: function (opt) {
                console.log(opt);
                var axisData = opt.xAxis[0].data;
                var series = opt.series;
                var table =
                  '<table style="width:100%;text-align:center"><tbody><tr>' +
                  "<td>时间</td>" +
                  "<td>" +
                  series[0].name +
                  "</td>" +
                  "<td>" +
                  series[1].name +
                  "</td>" +
                  "</tr>";
                for (var i = 0, l = axisData.length; i < l; i++) {
                  table +=
                    "<tr>" +
                    "<td>" +
                    axisData[i] +
                    "</td>" +
                    "<td>" +
                    series[0].data[i] +
                    "</td>" +
                    "<td>" +
                    series[1].data[i] +
                    "</td>" +
                    "</tr>";
                }
                table += "</tbody></table>";
                return table;
              },
            },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              title: {
                line: "动态类型切换-折线图",
                bar: "动态类型切换-柱形图",
                stack: "动态类型切换-堆积",
                tiled: "动态类型切换-平铺",
              },
              type: ["line", "bar", "stack", "tiled"],
            },
            restore: { show: true, title: "还原", color: "black" },
            saveAsImage: {
              show: true,
              title: "保存为图片",
              type: "jpeg",
              lang: ["点击本地保存"],
            },
          },
        },
        calculable: true,
        dataZoom: {
          show: true,
          realtime: true,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false, // 类目起始和结束两端空白策略,默认true留空,false则顶头
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数量",
            type: "line",
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    initDict() {
      this.$https.get("index/product").then((res) => {
        this.productList = res.data.data;
      });
      this.$https.get("index/doctor").then((res) => {
        this.doctorList = res.data.data;
      });
      this.$https.get("dict/consultSubject").then((res) => {
        this.subjectList = res.data.data;
      });
    },
    initCount() {
      this.$https.get("index/preDayNewCustomer").then((res) => {
        this.preDayRegistCustomer = res.data.data.regist;
        this.preDayNewCreatedCustomer = res.data.data.created;
      });
      this.$https.get("index/countUnReply").then((res) => {
        this.countUnReply = res.data.data;
      });
      this.$https.get("index/countApply").then((res) => {
        this.countApply = res.data.data;
      });
      this.$https.get("index/countUnSendOrder").then((res) => {
        this.countUnSendOrder = res.data.data;
      });
      this.$https.get("index/preDayOrderAmount").then((res) => {
        this.preDayOrderAmount = res.data.data;
      });
      this.$https.get("index/preDayDoctorOrderAmount").then((res) => {
        this.preDayDoctorOrderAmount = res.data.data;
      });
    },
    setEcharts() {
      var option0 = {
        title: {
          text: "订单量",
        },
        tooltip: {},
        legend: {
          data: ["订单量"],
        },
        xAxis: {
          data: ["一月", "二月", "三月", "四月", "五月", "6月"],
        },
        yAxis: {},
        series: [
          {
            name: "订单量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 100],
          },
        ],
      };
      var option1 = {
        backgroundColor: "#FFFFFF",
        visualMap: {
          show: true,
          min: 0,
          max: 1000,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            data: [
              { value: 522, name: "儿科" },
              { value: 552, name: "妇科" },
              { value: 524, name: "耳鼻喉科" },
              { value: 425, name: "心脑科" },
              { value: 470, name: "五官科" },
            ],
            roseType: "angle",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(0, 0, 0, 1)",
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(0, 0, 0, 1)",
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#c23531",
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0)",
              },
            },
          },
        ],
      };
      var option2 = {
        backgroundColor: "#FFFFFF",
        visualMap: {
          show: true,
          min: 0,
          max: 1000,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "订单量",
            type: "pie",
            radius: "55%",
            data: [
              { value: 522, name: "一月" },
              { value: 552, name: "二月" },
              { value: 524, name: "三月" },
              { value: 425, name: "四月" },
              { value: 470, name: "五月" },
              { value: 470, name: "六月" },
            ],
            roseType: "angle",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(0, 0, 0, 1)",
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(0, 0, 0, 1)",
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#c23531",
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0)",
              },
            },
          },
        ],
      };
      var option3 = {
        title: {
          text: "近7天订单趋势图",
          subtext: "成交订单",
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        legend: {
          data: ["蒸发量", "降水量"],
          left: "left",
        },
        toolbox: {
          show: true,
          orient: "horizontal",
          left: "right",
          top: "top",
          color: ["#1e90ff", "#22bb22", "#4b0082", "#d2691e"],
          backgroundColor: "rgba(0,0,0,0)", // 工具箱背景颜色
          borderColor: "#ccc", // 工具箱边框颜色
          borderWidth: 0, // 工具箱边框线宽
          padding: 5, // 工具箱内边距
          showTitle: true,
          feature: {
            mark: {
              show: true,
              title: {
                mark: "辅助线-开关",
                markUndo: "辅助线-删除",
                markClear: "辅助线-清空",
              },
              lineStyle: { width: 1, color: "#1e90ff", type: "dashed" },
            },
            dataZoom: {
              show: true,
              title: "数据视图",
              readOnly: true,
              lang: ["数据视图", "美团", "刷新"],
              optionToContent: function (opt) {
                console.log(opt);
                var axisData = opt.xAxis[0].data;
                var series = opt.series;
                var table =
                  '<table style="width:100%;text-align:center"><tbody><tr>' +
                  "<td>时间</td>" +
                  "<td>" +
                  series[0].name +
                  "</td>" +
                  "<td>" +
                  series[1].name +
                  "</td>" +
                  "</tr>";
                for (var i = 0, l = axisData.length; i < l; i++) {
                  table +=
                    "<tr>" +
                    "<td>" +
                    axisData[i] +
                    "</td>" +
                    "<td>" +
                    series[0].data[i] +
                    "</td>" +
                    "<td>" +
                    series[1].data[i] +
                    "</td>" +
                    "</tr>";
                }
                table += "</tbody></table>";
                return table;
              },
            },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              title: {
                line: "动态类型切换-折线图",
                bar: "动态类型切换-柱形图",
                stack: "动态类型切换-堆积",
                tiled: "动态类型切换-平铺",
              },
              type: ["line", "bar", "stack", "tiled"],
            },
            restore: { show: true, title: "还原", color: "black" },
            saveAsImage: {
              show: true,
              title: "保存为图片",
              type: "jpeg",
              lang: ["点击本地保存"],
            },
          },
        },
        calculable: true,
        dataZoom: {
          show: true,
          realtime: true,
          start: 20,
          end: 80,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false, // 类目起始和结束两端空白策略,默认true留空,false则顶头
            data: (function () {
              var list = [];
              for (var i = 1; i <= 30; i++) {
                list.push("2013-03-" + i);
              }
              return list;
            })(),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "最高",
            type: "line",
            data: (function () {
              var list = [];
              for (var i = 1; i <= 30; i++) {
                list.push(Math.round(Math.random() * 30));
              }
              return list;
            })(),
          },
          {
            name: "最低",
            type: "line",
            data: (function () {
              var list = [];
              for (var i = 1; i <= 30; i++) {
                list.push(Math.round(Math.random() * 10));
              }
              return list;
            })(),
          },
        ],
      };
      var option0 = {
        title: {
          text: "订单量",
        },
        tooltip: {},
        legend: {
          data: ["订单量"],
        },
        xAxis: {
          data: ["七月", "八月", "九月", "十月", "十一月", "十二月"],
        },
        yAxis: {},
        series: [
          {
            name: "订单量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 100],
          },
        ],
      };

      var chart0 = echarts.init(document.getElementById("chart0"));
      var chart1 = echarts.init(document.getElementById("chart1"));
      var chart2 = echarts.init(document.getElementById("chart2"));
      var chart3 = echarts.init(document.getElementById("chart3"));
      var chart4 = echarts.init(document.getElementById("chart4"));
      chart0.setOption(option3);
      chart1.setOption(option1);
      chart2.setOption(option0);
      chart3.setOption(option2);
      chart4.setOption(option0);
    },
    initOrderChart() {
      let startDate = this.getDay(-30),
        endDate = this.getDay(0);
      if (
        this.orderQueryParam.timespan &&
        this.orderQueryParam.timespan.length > 0
      ) {
        startDate = this.orderQueryParam.timespan[0];
        endDate = this.orderQueryParam.timespan[1];
      }
      this.$https
        .get("index/orderCount", {
          sourceType: this.orderQueryParam.sourceType,
          productId: this.orderQueryParam.productId,
          startDate: startDate,
          endDate: endDate,
        })
        .then((res) => {
          let r = res.data.data;
          let xlist = [];
          let ylist = [];
          let curr = new Date(startDate);
          let end = new Date(endDate);
          let cr = 0;
          while (curr <= end) {
            var x = this.formatterDate(curr);
            curr.setDate(curr.getDate() + 1);
            xlist.push(x);
            if (cr < r.length && r[cr].xaxis == x) {
              ylist.push(r[cr].yaxis);
              cr++;
            } else {
              ylist.push(0);
            }
          }
          this.orderCount.xAxis[0].data = xlist;
          this.orderCount.series[0].data = ylist;
          var chart0 = echarts.init(document.getElementById("chart0"));
          chart0.setOption(this.orderCount);
        });
    },
    initDoctorOrderChart() {
      let startDate = this.getDay(-30),
        endDate = this.getDay(0);
      if (
        this.doctorOrderQueryParam.timespan &&
        this.doctorOrderQueryParam.timespan.length > 0
      ) {
        startDate = this.doctorOrderQueryParam.timespan[0];
        endDate = this.doctorOrderQueryParam.timespan[1];
      }
      this.$https
        .get("index/doctorOrderCount", {
          doctorId: this.doctorOrderQueryParam.doctorId,
          subjectId: this.doctorOrderQueryParam.subjectId,
          startDate: startDate,
          endDate: endDate,
        })
        .then((res) => {
          let r = res.data.data;
          let xlist = [];
          let ylist = [];
          let curr = new Date(startDate);
          let end = new Date(endDate);
          let cr = 0;
          while (curr <= end) {
            var x = this.formatterDate(curr);
            curr.setDate(curr.getDate() + 1);
            xlist.push(x);
            if (cr < r.length && r[cr].xaxis == x) {
              ylist.push(r[cr].yaxis);
              cr++;
            } else {
              ylist.push(0);
            }
          }
          this.doctoroOrderCount.xAxis[0].data = xlist;
          this.doctoroOrderCount.series[0].data = ylist;
          var doctorOrder = echarts.init(
            document.getElementById("doctorOrder")
          );
          doctorOrder.setOption(this.doctoroOrderCount);
        });
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      return this.formatterDate(today);
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    formatterDate(today) {
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "orderQueryParam") {
        this.initOrderChart();
      }
      if (formName == "doctorOrderQueryParam") {
        this.initDoctorOrderChart();
      }
    },
    getIncomeFlowDTOExtra() {
      this.$https.get("doctorRole/getIncomeFlowDTOExtra", {}).then((res) => {
        this.amount = res.data.data.amount;
        this.totalAmount = res.data.data.totalAmount;
        this.totalDistributeFee = res.data.data.totalDistributeFee;
        this.totalReplyFee = res.data.data.totalReplyFee;
        this.hasSettlement = res.data.data.hasSettlement;
        this.isApplyDrawCash = res.data.data.isApplyDrawCash;
      });
    },
  },
  mounted() {
    var userType = sessionStorage.getItem("userType");
    if (userType != 2) {
      this.showCharts = true;
      this.initCount();
      this.initOrderChart();
      this.initDoctorOrderChart();
      this.initDict();
    } else {
      this.getIncomeFlowDTOExtra();
    }
  },
};
</script>

<style lang="less">
.card {
  display: flex;
  flex-direction: row;
  height: auto;
  width: 100%;
  background-color: #f0f2f5;
}
.card-item {
  flex: 1;
  display: block;
  margin: 20px;
  padding: 20px 0;
  background-color: #ffffff;
  position: relative;
  i {
    margin: 20px;
    font-size: 40px;
    color: pink;
  }
  .item-detail {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    margin: 40px;
    p {
      text-align: center;
      margin-bottom: 5px;
      font-size: 14px;
    }
  }
}
</style>
